<style scoped>
    .management-unit-page{}
    .management-unit-page .condition{line-height: 36px;}
    .management-unit-page #personMessageMask .el-form-item{margin-bottom:10px;}
</style>

<template>
    <div class="management-unit-page">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="border-bottom:1px solid #ccc;">
            <!--人员名称-->
            <el-form-item  :label="nowLangue.personName" class="selectMB10">
                <el-input size="mini" v-model="formInline.personName" :placeholder="nowLangue.pleaseImport+nowLangue.personName"></el-input>
            </el-form-item>
            <!--登录账号-->
            <el-form-item :label="nowLangue.loginAccount" class="selectMB10">
                <el-input size="mini" v-model="formInline.userName" :placeholder="nowLangue.pleaseImport+nowLangue.loginAccount"></el-input>
            </el-form-item>
            <!--当前状态-->
            <el-form-item :label="nowLangue.currStatus" class="selectMB10">
                <el-select size="mini" clearable v-model="formInline.enabled" :placeholder="nowLangue.pleaseSelect">
                    <el-option label="启用" value="true"></el-option>
                    <el-option label="禁用" value="false"></el-option>
                </el-select>
            </el-form-item>
            <!---->
            <el-form-item :label="nowLangue.serviceStationName" class="selectMB10">
                <el-input size="mini" v-model="formInline.stationName" :placeholder="nowLangue.pleaseImport+nowLangue.serviceStationName"></el-input>
            </el-form-item>
            <!--服务站编码-->
            <el-form-item :label="nowLangue.serviceStationCode" class="selectMB10">
                <el-input size="mini" v-model="formInline.stationCode" :placeholder="nowLangue.pleaseImport+nowLangue.serviceStationCode"></el-input>
            </el-form-item>
            <!--主站编码-->
            <el-form-item :label="nowLangue.masterCode" class="selectMB10">
                <el-input size="mini" v-model="formInline.masterStationCode" :placeholder="nowLangue.pleaseImport+nowLangue.masterCode"></el-input>
            </el-form-item>
            <el-form-item class="selectMB10">
                <!--查询-->
                <el-button class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" type="danger" @click="handleQuery" v-text="nowLangue.query"></el-button>
            </el-form-item>
        </el-form>
        <!--表格-->
        <!--服务体系人员列表：-->
        <label class="default-label" v-text="nowLangue.serviceSystemStaffList"></label>
        <el-table :data="tableData" border style="width: 100%;" v-loading.body="loading" element-loading-text="拼命加载中">
            <!--序-->
            <el-table-column type="index" header-align="center" align="center" :label="nowLangue.sequence"  width="40"></el-table-column>
            <!--操作-->
            <el-table-column :label="nowLangue.operate" header-align="center" align="center" width="140">
                <template scope="scope">
                    <!--启用-->
                    <button class="operationItem bolder" v-if="scope.row.enabled && powerFlag1" @click="handleOpen(scope.$index, scope.row)" v-text="nowLangue.enable" :disabled="statusDisabled"></button>
                    <!--禁用-->
                    <button class="operationItem bolder" v-if="!scope.row.enabled && powerFlag1" @click="handleDisable(scope.$index, scope.row)" v-text="nowLangue.forbidden" :disabled="statusDisabled"></button>
                    <!--重置密码-->
                    <button class="operationItem bolder" v-if="scope.row.enabled && powerFlag2" @click="handleResetPassword(scope.$index, scope.row)"  v-text="nowLangue.resetPassword"></button>
                    <!--重置密码-->
                    <button class="operationItem disabled bolder" v-if="!scope.row.enabled && powerFlag2" v-text="nowLangue.resetPassword"></button>
                    <!--查看-->
                    <button class="operationItem bolder" @click="handleEdit(scope.$index, scope.row)" v-text="nowLangue.lookUp"></button>
                </template>
            </el-table-column>
            <!--人员名称-->
            <el-table-column prop="personName"  :label="nowLangue.personName" header-align="center" width="130" show-overflow-tooltip></el-table-column>
            <!--登录账户-->
            <el-table-column prop="userName" :label="nowLangue.loginAccount" header-align="center" width="130" show-overflow-tooltip></el-table-column>
            <!--服务站名称-->
            <el-table-column prop="stationName" :label="nowLangue.serviceStationName" header-align="center" show-overflow-tooltip></el-table-column>
            <!--服务站代码-->
            <el-table-column prop="stationCode" :label="nowLangue.serviceStationCode" header-align="center" width="120" show-overflow-tooltip></el-table-column>
            <!--主站编码-->
            <el-table-column prop="masterStationCode" :label="nowLangue.masterCode" header-align="center" width="100" show-overflow-tooltip></el-table-column>
            <!--状态-->
            <el-table-column prop="enabledName" :label="nowLangue.status" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination v-if="isPaging" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"  :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :page-count="totalPage" :total="totalNumber">
        </el-pagination>

        <!--查看按钮的弹框-->
        <!--服务体系人员信息-->
        <el-dialog :title="nowLangue.serviceSystemPersonnelMes" :visible.sync="dialogFormVisible" id="personMessageMask" size="tiny" :lock-scroll="false">
            <el-form :model="form" ref="form"  :inline="true"  class="demo-form-inline label-minW110">
                <!--姓名-->
                <el-form-item :label="nowLangue.fullName" prop="name">
                    <el-input size="mini" disabled v-model="form.personName" auto-complete="off"></el-input>
                </el-form-item>
                <!--登录账户-->
                <el-form-item :label="nowLangue.loginAccount" prop="code">
                    <el-input size="mini" disabled v-model="form.userName" auto-complete="off"></el-input>
                </el-form-item>
                <!--服务站名称-->
                <el-form-item :label="nowLangue.serviceStationName" prop="code">
                    <el-input size="mini" disabled v-model="form.stationName" auto-complete="off"></el-input>
                </el-form-item>
                <!--服务站编码-->
                <el-form-item :label="nowLangue.serviceStationCode" prop="code">
                    <el-input size="mini" disabled v-model="form.stationCode" auto-complete="off"></el-input>
                </el-form-item>
                <!--总站名称-->
                <el-form-item :label="nowLangue.stationName" prop="code">
                    <el-input size="mini" disabled v-model="form.masterStationName" auto-complete="off"></el-input>
                </el-form-item>
                <!--总站编码-->
                <el-form-item :label="nowLangue.stationCode" prop="code">
                    <el-input size="mini" disabled v-model="form.masterStationCode" auto-complete="off"></el-input>
                </el-form-item>
                <!--状态-->
                <el-form-item :label="nowLangue.status">
                    <el-radio-group disabled v-model="form.enabled">
                        <el-radio :label="true" v-cloak>{{nowLangue.enable}}</el-radio>
                        <el-radio :label="false" v-cloak>{{nowLangue.forbidden}}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--重置密码的弹框-->
        <!--重置密码-->
        <el-dialog :title="nowLangue.resetPassword" :visible.sync="resetPasswordFormVisible" size="tiny" :lock-scroll="false">
            <el-form :model="resetPasswordForm" ref="resetPasswordForm"   :inline="true"  class="demo-form-inline label-minW110">
                <!--姓名-->
                <el-form-item :label="nowLangue.fullName">
                    <el-input size="mini" disabled v-model="resetPasswordForm.personname" auto-complete="off"></el-input>
                </el-form-item>
                <!--登录账户-->
                <el-form-item :label="nowLangue.loginAccount">
                    <el-input size="mini" 　 disabled v-model="resetPasswordForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item :label="nowLangue.password" prop="password" :rules="[{ required: true, message: nowLangue.required},{ validator: validatePass, trigger: 'blur' }]">
                    <el-input size="mini" type="password" v-model.trim="resetPasswordForm.password" auto-complete="off" :placeholder="nowLangue.pleaseImport+nowLangue.password"></el-input>
                </el-form-item>
                <!--确认密码-->
                <el-form-item :label="nowLangue.confirmPassword" prop="checkPass" :rules="[{ required: true, message: nowLangue.required},{ validator: validatePass2, trigger: 'blur' }]">
                    <el-input size="mini" type="password" v-model.trim="resetPasswordForm.checkPass" auto-complete="off" :placeholder="nowLangue.pleaseImport+nowLangue.confirmPassword"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!--返 回-->
                <el-button class="bolder outsideBtnBS" size="mini" @click="resetPasswordFormVisible = false" v-text="nowLangue.return"></el-button>
                <!--保 存-->
                <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="saveResetPassword('resetPasswordForm')" v-text="nowLangue.save"  :disabled="resetPSaveDisabled"></el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            var _this = this;
            //重置密码页面中，密码对比验证。
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    var tip=_this.languageType=="zh"?'请输入密码':'Please input a password';
                    callback(new Error(tip));
                } else {
                    if (this.resetPasswordForm.checkPass !== '') {
                        this.$refs.resetPasswordForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    var tip2=_this.languageType=="zh"?'请再次输入密码':'Please enter your password again';
                    callback(new Error(tip2));
                } else if (value !== this.resetPasswordForm.password) {
                    var tip3=_this.languageType=="zh"?'两次输入密码不一致':'The password for the two time is inconsistent';
                    callback(new Error(tip3));
                } else {
                    callback();
                }
            };

            return {
                nowLangue:{},
                validatePass:validatePass,   //重置密码  密码
                validatePass2:validatePass2,  //重置密码  确认密码
                pageIndex:1,    //当前页（必传）
                pageSize :10,   //每页多少条
                totalNumber: 20,
                totalPage:2,
                isPaging:false,
                //重置密码字段
                resetPasswordForm: {
                    personname: '',
                    username: '',
                    password: '',
                    checkPass: '',
                    legalPersonIds: [],
                    legalPersonCode: ''
                },

                formInline:{
                    personName:'',
                    userName:'',
                    enabled:'',
                    stationName:'',
                    stationCode:'',
                    masterStationCode:''
                },
                loading:false,
                // 表格
                tableData: [],
                // 分页
                // 修改的弹窗
                dialogFormVisible: false,
                //重置密码弹窗静默状态为关闭
                resetPasswordFormVisible: false,
                form: {
                    personName:'',
                    userName: '',
                    stationName:'',
                    stationCode:'',
                    masterStationName:'',
                    masterStationCode:'',
                    enabled:''
                },
                //权限
                powerFlag1:false,
                powerFlag2:false,
                
                selectDisabled:false,  //查询禁用
                statusDisabled:false,   // 启用禁用状态操作按钮禁用
                resetPSaveDisabled:false // 重置密码的保存操作按钮禁用 
            };
        },
        created:function(){
            var _this=this;
            _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
        },
        computed:{
            powerData(){
                return this.$store.state.powerData;
            },
            languageType(){
                return this.$store.state.languageType;
            }
        },
        watch:{
            languageType(){
                var _this=this;
                _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
            },
            powerData(){
                var _this = this;
                for(var i=0;i<_this.powerData.length;i++){
                    if(_this.powerData[i]=="ROLE_security_serviceSystemPersonnel_modifyStatus"){
                        //服务体系人员修改状态权限
                        _this.powerFlag1=true;
                    }
                    if(_this.powerData[i]=="ROLE_security_serviceSystemPersonnel_resetPassword"){
                        //服务体系人员重置密码权限
                        _this.powerFlag2=true;
                    }
                }
            }
        },
        mounted: function () {
            var _this = this;
            //判断权限
            // //ajax前后查询按钮禁用
            // $(".selectAll").ajaxStart(function(){
            //     _this.selectDisabled=true;
            // });
            // $(".selectAll").ajaxStop(function(){
            //     _this.selectDisabled=false;
            // });
            for(var i=0;i<_this.powerData.length;i++){
                if(_this.powerData[i]=="ROLE_security_serviceSystemPersonnel_modifyStatus"){
                    //服务体系人员修改状态权限
                    _this.powerFlag1=true;
                }
                if(_this.powerData[i]=="ROLE_security_serviceSystemPersonnel_resetPassword"){
                    //服务体系人员重置密码权限
                    _this.powerFlag2=true;
                }
            }
            _this.handleQuery();
        },
        methods: {
            handleQuery(){
                var _this=this;
                _this.loading=true;
                var tmp={personName: _this.formInline.personName, userName: _this.formInline.userName, enabled: _this.formInline.enabled, stationName: _this.formInline.stationName, stationCode: _this.formInline.stationCode, masterStationCode: _this.formInline.masterStationCode, pageIndex: _this.pageIndex, pageSize: _this.pageSize};
                _this.selectDisabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.metadata_service+"station/search",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.loading=false;
                            _this.tableData=data.data.dataList;
                            _this.isPaging=true;
                            _this.totalPage=data.data.totalPage;
                            _this.totalNumber=data.data.totalNumber;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                        _this.selectDisabled=false;    
                    }
                });
            },
            updateStatus(id, status) {
                var _this=this;
                var tmp={userId: id, enabled: status};
                _this.statusDisabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.metadata_service+"legalPerson/updateStaffStatus",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            var success=_this.languageType=="zh"?'提交成功！':'Submit successfully!';
                            _this.common.successTip(success);
                            _this.queryByPage(_this.pageIndex, _this.pageSize);
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                        _this.statusDisabled=false;    
                    }
                });
            },

            //重置密码
            handleResetPassword(index, row){
                var _this = this;
                _this.resetPasswordFormVisible = true;
                _this.resetPasswordForm.userId = row.userId;
                _this.resetPasswordForm.username = row.userName;
                _this.resetPasswordForm.personname = row.personName;
                _this.resetPasswordForm.password = "";
                _this.resetPasswordForm.checkPass = "";
                
                //清空绑定的数据
                if(this.$refs["resetPasswordForm"]){
                    this.$refs["resetPasswordForm"].resetFields();
                }
            },
            //  查看服务体系人员
            handleEdit(index, row) {
                var _this=this;
                _this.dialogFormVisible=true;
                _this.form.personName = row.personName;
                _this.form.userName = row.userName;
                _this.form.stationName = row.stationName;
                _this.form.stationCode = row.stationCode;
                _this.form.masterStationName = row.masterStationName;
                _this.form.masterStationCode = row.masterStationCode;
                _this.form.enabled = row.enabled;
            },
            handleDisable(index, row) {
                var _this=this;
                _this.updateStatus(row.userId, false);
            },
            handleOpen(index, row) {
                var _this=this;
                _this.updateStatus(row.userId, true);
            },
            //   分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                var _this=this;
                _this.pageSize=val;
                _this.queryByPage(_this.pageIndex, _this.pageSize);

            },
            //点击页码分页查询点击事件
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                var _this=this;
                _this.pageIndex=val;
                _this.queryByPage(_this.pageIndex, _this.pageSize);
            },
            //查询点击事件
            queryByPage(pageIndex, pageSize) {
                var _this=this;
                _this.$nextTick(function () {
                    var tmp={personName: _this.formInline.personName, userName: _this.formInline.userName, enabled: _this.formInline.enabled, stationName: _this.formInline.stationName, stationCode: _this.formInline.stationCode, masterStationCode: _this.formInline.masterStationCode, pageIndex: pageIndex, pageSize: pageSize};
                    $.ajax({
                        type: 'POST',
                        url:_this.metadata_service+"station/search",
                        cache: false,
                        data:JSON.stringify(tmp),
                        dataType:'JSON',
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.success) {
                                _this.tableData=data.data.dataList;
                                _this.isPaging=true;
                                _this.totalPage=data.data.totalPage;
                                _this.totalNumber=data.data.totalNumber;
                            }else
                                _this.common.errorTip(data.errorMessage);
                        }
                    });
                })
            },

            //重置密码保存事件
            saveResetPassword(formName) {
                var _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var tmp = {
                            id: _this.resetPasswordForm.userId,
                            password: _this.resetPasswordForm.password,
                        };
                        _this.resetPSaveDisabled=true;
                        $.ajax({
                            type: 'POST',
                            url: _this.metadata_service + "/legalPerson/resetPassword",
                            cache: false,
                            data: JSON.stringify(tmp),
                            dataType: 'JSON',
                            contentType: "application/json;charset=utf-8",
                            success: function (data) {
                                if (data.success) {
                                    var success=_this.languageType=="zh"?'密码重置成功！':'Password reset succeeded!';
                                    _this.common.successTip(success);
                                    _this.queryByPage(_this.pageIndex, _this.pageSize);
                                    _this.resetPasswordFormVisible=false
                                } else{
                                    _this.common.errorTip(data.errorMessage);
                                }
                                _this.resetPSaveDisabled=false;   
                            }
                        });
                    } else {
                        var  err=_this.common.formErrorInfo();
                        _this.common.errorTip(err);
                        return false;
                    }
                });
            }

        }

    }

</script>